<template>
<div class="zoom">
    <div class="pic-zoom">
        <div class="preview-box" @mousemove="move($event)" @mouseleave="out" ref="previewBox" @mouseenter="enter">
            <img :src="previewImg" class="img">
            <div class="mask" ref="hoverBox" v-show="maskShow"></div>
        </div>
        <div class="zoom-box" v-show="zoomVisiable" ref="zoomBox">
            <img :src="zoomImg" ref="bigImg">
        </div>
    </div>
    <!-- 左右切换按钮 -->
    <div class="select">
      <!-- 向左按钮 -->
        <span class="select_l" @click="prev" :class="{disabled:leftBtnDisabled}">
            <i class="icon icon-back"></i>
        </span>
        <!-- 中间列表 -->
        <span class="select_c">
          <ul class="data" :style="{left:left+'px'}">
            <li class="data_i" v-for="(item,index) in data" :key="index" @click="setCuttent(index)">
              <img :src="item" alt="" class="img">
            </li>
          </ul>
        </span>
        <!-- 向右按钮 -->
        <span class="select_r" @click="next" :class="{disabled:rightBtnDisabled}">
            <i class="icon icon-next"></i>
        </span>
    </div>
</div>
</template>

<script>
function offset(el) {
    let top = el.offsetTop;
    let left = el.offsetLeft;
    if (el.offsetParent) {
        el = el.offsetParent;
        top += el.offsetTop;
        left += el.offsetLeft;
    }
    return {
        left: left,
        top: top
    };
}
export default {
    name: 'picZoom',
    props: {
        data:{
          type:Array
        }
    },
    computed:{
      // 所有item的总宽度
      sumWidth(){
        return this.iWidth*this.data.length||0
      },
      // 左侧按钮不能点击
      leftBtnDisabled(){
        return this.left==0
      },
      // 右侧按钮不能点击
      rightBtnDisabled(){
        return (this.left==this.iWidth*this.num-this.sumWidth)||this.data.length<6
      },
      previewImg() {
            return this.data[this.currentIndex]
      },
      zoomImg() {
          return this.data[this.currentIndex]
      },
    },
    data() {
        return {
            zoomVisiable: false,
            maskShow: false,
            left:0,
            iWidth:62,
            num:5,//不用作用切换时，下方最多显示的数量
            currentIndex:0,
        };
    },
    mounted(){
    },
    methods: {
        enter() {
            this.maskShow = true;
        },
        out() {
            this.zoomVisiable = false;
            this.maskShow = false;
        },
        move(ev) {
            this.init();
            // 鼠标距离屏幕距离
            let moveX = ev.clientX;
            let moveY = ev.clientY;
            // 大盒子距离顶部的距离
            let offsetLeft = offset(this.oPreviewBox).left;
            let offsetTop = offset(this.oPreviewBox).top;
            let left = moveX - offsetLeft - this.houverWidth / 2;
            let top;
            if (this.scroll > 0) {
                top = moveY - offsetTop + this.scroll - this.houverHeight / 2;
            } else {
                top = moveY - offsetTop - this.houverHeight / 2;
            }
            let maxWidth = this.pWidth - this.houverWidth;
            let maxHeight = this.pWidth - this.houverHeight;
            left = left < 0 ? 0 : left > maxWidth ? maxWidth : left;
            top = top < 0 ? 0 : top > maxHeight ? maxHeight : top;
            let percentX = left / (maxWidth);
            let percentY = top / (maxHeight);
            this.oHoverBox.style.left = left + 'px';
            this.oHoverBox.style.top = top + 'px';
            this.oBigImg.style.left = percentX * (this.bWidth - this.imgWidth) + 'px';
            this.oBigImg.style.top = percentY * (this.bHeight - this.imgHeight) + 'px';
            this.$emit('move', ev);
            this.zoomVisiable = true;
        },
        init() {
            this.oHoverBox = this.$refs.hoverBox;
            this.oPreviewBox = this.$refs.previewBox;
            this.oBigImg = this.$refs.bigImg;
            this.imgBox = this.$refs.zoomBox;
            this.houverWidth = this.oHoverBox.offsetWidth;
            this.houverHeight = this.oHoverBox.offsetHeight;
            this.pWidth = this.oPreviewBox.offsetWidth;
            this.pHeight = this.oPreviewBox.offsetHeight;
            this.imgWidth = this.oBigImg.offsetWidth;
            this.imgHeight = this.oBigImg.offsetHeight;
            this.bWidth = this.imgBox.offsetWidth;
            this.bHeight = this.imgBox.offsetHeight;
            this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
        },
        // 点击后上屏
        setCuttent(index){
          this.currentIndex=index
        },
        // 左侧按钮
        prev(){
          if(this.left!=0){
            this.left+=this.iWidth
          }
        },
        // 右侧按钮
        next(){
          if(this.left!=this.iWidth*this.num-this.sumWidth&&this.data.length>5){
            this.left-=this.iWidth
          }
        }
    }
};
</script>

<style lang="scss" scoped>
.zoom {
    .pic-zoom {
        position: relative;
        // 左侧可放大区域
        .preview-box {
            width: 350px;
            height: 350px;
            border: 1px solid #EBEBEB;
            border-radius: 5px;
            position: relative;
            cursor: crosshair;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            // 放大镜
            .mask {
                top: 75px;
                left: 75px;
                width: 200px;
                height: 200px;
                position: absolute;
                background-color: #FFF;
                opacity: .6;
                border: 1px solid #CCC;
                cursor: crosshair;
                z-index: 101;
            }
            .img{
              max-width: 100%;
              max-height: 100%;
            }
        }
        // 右侧放大区域
        .zoom-box {
            top: 0px;
            left: 365px;
            width: 400px;
            height: 400px;
            border: 1px solid #999;
            position: absolute;
            overflow: hidden;
            z-index: 100;
            background: #FFF;

            img {
                width: 700px;
                max-width: 700px;
                position: absolute;
                border: 0px;
                display: block;
                left: -150px;
                top: -150px;
            }
        }
    }

    .select {
        display: flex;
        margin-top: 20px;
        $h: 52px;
        &_l,
        &_r {
            display: flex;
            align-items: center;
            height: $h;
            width: 20px;
            cursor: pointer;
            .ivu-icon{
              font-size: 22px;
            }
            &.disabled{
              cursor: default;
              opacity: 0.2;
            }
        }

        &_c {
          height: $h;
          width:300px;
          overflow: hidden;
          position: relative;
          .data{
            position: relative;
            display: flex;
            flex-wrap: nowrap;
            &_i{
              box-sizing: border-box;
              border: 1px solid #EBEBEB;
              border-radius: 5px;
              overflow: hidden;
              display: flex;
              justify-content: center;
              align-items: center;
              height: $h;
              width:$h;
              flex:0 0 $h;
              cursor: pointer;
              &:not(:last-child){
                margin-right: 10px;
              }

              .img{
                max-width: 100%;
                max-height: 100%;
              }
            }
          }
        }

        &_r {
          margin-left: 10px;
        }
    }
    .icon{
      $w: 10px;
      $h: 16px;
      background-image: url('@/assets/img/icon_prev_gray.png');
      width: $w;
      height: $h;
      background-size: $w $h;
      &-back{

      }
      &-next{
        transform:rotate(180deg);
      }
    }
}
</style>
